<template>
  <div>
    <!-- 
      pinia:
        是一个集中的状态管理工具，和vuex是一样的。
        语法：
          1）选项式API
          2）组合式API 
        支持：
          vue2
          vue3
          调试工具
          ts  
        vuex只能有一个仓库，pinia可以有N个仓库。
          1）可以创建多个全局仓库，不用像 Vuex 一个仓库嵌套模块，结构复杂。
          2）管理数据简单，提供数据和修改数据的逻辑即可，不像Vuex需要记忆太多的API。

      使用：
        1）yarn add pinia       or       npm i pinia

      总结： 
        1）通过 const useXxxStore = defineStore('id',函数) 创建仓库得到使用仓库的函数
        2）   vuex                          pinia 
             state                      ref 或  reactive
             getters                    computed 创建的计算属性
           mutations 和 actions         普通函数，同步异步均可
        3）使用Pinia与在组件中维护数据大体相同，这就是 Pinia 的状态管理基本使用
     -->

    <!-- <p>{{ store.count }} {{ store.doubleCount }}</p> -->
    <!-- <button @click="store.update()">count++</button> -->
    <!-- <button @click="store.asyncUpdate()">async update</button> -->

    <h1>状态管理</h1>
    <h1 v-text="num"></h1>
    <h1 v-text="total1"></h1>
    <h1 v-text="total2"></h1>
    <button @click="addNum(2)">自增+2</button>
    <button @click="add">自增+3</button>
    <button @click="reset">重置</button>
    <hr />
    <div v-for="(row, idx) in list" :key="row.id">
      <span v-text="idx"></span>：
      <span v-text="row.title"></span>
    </div>
    <button @click="pageHandle(-1)">上一页</button>
    <button @click="pageHandle(1)">下一页</button>
  </div>
</template>

<script setup>
import { useCnodeStore } from "../store/cnode";
import { storeToRefs } from "pinia";
import { watchEffect, ref } from "vue";

const store = useCnodeStore();
const page = ref(1);
const { addNum, geteList } = store;
const { num, list, total1, total2 } = storeToRefs(store);

const add = () => {
  // addNum(3);
  // store.addNum(3);

  // 修改pinia中的state数据【OK】
  store.$patch({ num: store.num + 3 });
};

const reset = () => {
  store.$reset();
};

watchEffect(
  () => {
    geteList({ page: page.value, limit: 5, tab: "ask" });
  },
  { flush: "pre" }
);

const pageHandle = (num) => {
  if (page.value === 1 && num == -1) return;
  page.value += num;
};
</script>

<style lang="scss" scoped>
</style>